<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			}
			
			.layer {
			  position: relative;
			  width: 360px;
			  height: 640px;
			  background: rgba(0, 0, 0, 0.1);
			  transform-style: preserve-3d;
			  transform: rotateX(45deg) rotateZ(-45deg) scale(0.5);
			}
			.layer img {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  transition: 0.5s;
			}
			.layer:hover img:nth-child(1) {
			  transform: translateZ(40px);
			  opacity: 0.4;
			}
			.layer:hover img:nth-child(2) {
			  transform: translateZ(80px);
			  opacity: 0.6;
			}
			.layer:hover img:nth-child(3) {
			  transform: translateZ(120px);
			  opacity: 0.8;
			}
			.layer:hover img:nth-child(4) {
			  transform: translateZ(160px);
			  opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="layer">
		  <img src="https://i.loli.net/2019/11/25/gsETfHjRv9Ma7Bn.png" alt="img" />
		  <img src="https://i.loli.net/2019/11/25/gsETfHjRv9Ma7Bn.png" alt="img" />
		  <img src="https://i.loli.net/2019/11/25/gsETfHjRv9Ma7Bn.png" alt="img" />
		  <img src="https://i.loli.net/2019/11/25/gsETfHjRv9Ma7Bn.png" alt="img" />
		</div>

	</body>
</html>
